<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
  </head>
  <body>
    <div class="group">
      <div
        class="photo"
        style="
          background-image: url(https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60);
        "
      ></div>
      <div
        class="photo"
        style="
          background-image: url(https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60);
        "
      ></div>
      <div
        class="photo"
        style="
          background-image: url(https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60);
        "
      ></div>
      <div
        class="photo"
        style="
          background-image: url(https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60);
        "
      ></div>
      <div
        class="photo"
        style="
          background-image: url(https://images.unsplash.com/photo-1543357530-d91dab30fa97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTN8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60);
        "
      ></div>
    </div>

    <style>
      body {
        height: 100vh;
        display: flex;
        margin: 0;
        background-image: linear-gradient(
          -225deg,
          #9efbd3 0%,
          #57e9f2 48%,
          #45d4fb 100%
        );
        align-items: center;
        justify-content: center;
        user-select: none;
      }

      .group {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
      }

      .photo {
        width: 15vw;
        height: 75vh;
        background-position: center;
        background-size: 75vh;
        margin: 1vw;
        border-radius: 3vw;
        display: inline-block;
        cursor: pointer;
      }
    </style>

    <script>
      const items = document.querySelectorAll(".photo");
      const expand = (item, i) => {
        items.forEach((it, ind) => {
          if (i === ind) return;
          it.clicked = false;
        });
        gsap.to(items, {
          width: item.clicked ? "15vw" : "8vw",
          duration: 2,
          ease: "elastic(1, .6)",
        });

        item.clicked = !item.clicked;
        gsap.to(item, {
          width: item.clicked ? "42vw" : "15vw",
          duration: 2.5,
          ease: "elastic(1, .3)",
        });
      };

      items.forEach((item, i) => {
        item.clicked = false;
        item.addEventListener("click", () => expand(item, i));
      });
    </script>
  </body>
</html>
